activity-list {
    $img-proportion: 750/283;
    $title-color: #333333;
    $time-color: #999999;
    $default-color: #333333;
    $color-font: #39b54a;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }

    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        ion-title {
            height: 100%;
            padding: 0 computed-vw(150);
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                font-size: computed-vw(60);
                padding: 0;
                text-align: center;
                &_active {
                    color: rgb(255, 202, 55);
                }
                &:first-child {
                    margin-right: computed-vw(220);
                }
            }
        }
    }
    ion-content.has-refresher > .scroll-content {
        background-color: #f5f5f5;
    }
    .switch-bar {
        width: 100%;
        justify-content: center;
        border-bottom: 1px solid #e4e5e6;
        background-color: #fff;
        z-index: 1000 !important;
        .switch-btn {
            font-size: computed-vw(54);
            padding: 0;
            color: $default-color;
            height: computed-vw(150);
            line-height: computed-vw(150);
            text-align: center;
            flex-basis: computed-vw(240);
            flex-grow: 0;
            &_selected {
                color: $color-font;
                position: relative;
            }
            &:first-child {
                margin-right: computed-vw(110);
            }
        }
        .switch-sign {
            position: absolute;
            width: computed-vw(220);
            height: computed-vw(7);
            bottom: computed-vw(-3.5);
            left: 0;
            margin-left: computed-vw(257);
            background-color: $color-font;
            transition: all .2s linear;
        }
        .sign-change {
            transition: all .2s linear;
            margin-left: computed-vw(607);
        }
    }
    .list-title {
        font-size: computed-vw(45);
        color: #1e2029;
        line-height: computed-vw(150);
        height: computed-vw(150);
        width: 100%;
        padding: 0 computed-vw(60);
        top: computed-vw(151);
        background-color: #fff;
        box-shadow:0 0 computed-vw(50) rgba(0,0,0,0.1);
        &:after {
            content: " ";
            position: absolute;
            width: 100%;
            height: computed-vw(1);
            background-color: #e4e5e6;
            top: 0;
            left: 0;
        }

        .filter-btn {
            float: right;
            background-color: #35ac63;
            position: relative;
            top: computed-vw(69/2);
            color: #fff;
            width: computed-vw(180);
            height: computed-vw(80);
            border-radius: computed-vw(40);
            font-size: computed-vw(39);
            display: flex;
            justify-content: center;
            align-items: center;
            i {
                background-image: url("../assets/images/activity/activity-list/icon_filter.png");
                background-size: 100% 100%;
                display: inline-block;
                width: computed-vw(39);
                height: computed-vw(39);
                vertical-align: middle;
                margin-right: computed-vw(6);
            }
        }
    }
    .card-list {
        padding: computed-vw(60);
        margin-top: computed-vw(300);
        &_empty {
            text-align: center;
            color: #999;
        }
        .msl-card {
            position: relative;
            border-radius: computed-vw(15);
            overflow: hidden;
            vertical-align: middle;
            background-color: #fff;
            box-shadow: 0 computed-vw(6) computed-vw(20) 0 rgba(0, 0, 0, 0.15);
            margin-bottom: computed-vw(60);
            adp-lazyload {
                background-color: #eee;
                img[src=""], img:not([src]) {
                    opacity: 0;
                }
            }
            .msl-card-img {
                vertical-align: middle;
                width: 100%;
                height: (100vw - computed-vw(60)*2)/$img-proportion;
                object-fit: fill;
            }
            .cache_img {
                height: 0;
            }
            .msl-card-ft {
                line-height: 1.2;
                .msl-card_title {
                    font-size: computed-vw(45);
                    padding: computed-vw(28) computed-vw(25) computed-vw(23);
                    color: $title-color;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .msl-card_time {
                    color: $time-color;
                    font-size: computed-vw(36);
                    padding: 0 computed-vw(25) computed-vw(30);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    div {
                        color: #35ac63;
                        border: 0.55px solid #35ac63;
                        border-radius: computed-vw(30);
                        height: computed-vw(60);
                        padding: 0 computed-vw(18);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            &-label {
                width: computed-vw(153);
                height: computed-vw(59);
                border-radius: computed-vw(59/2);
                font-size: computed-vw(36);
                color: #fff;
                z-index: 10;
                display: flex;
                align-items: center;
                justify-content: center;
                &_success {
                    background-color: #2ab465;
                }
                &_warn {
                    background-color: #ffc937;
                }
                &_danger {
                    background-color: #e04343;
                }
                &_primary {
                    background-color: #005d98;
                }
            }
        }

    }
    ion-refresher {
        top: 17.6 + computed-vw(300) !important;
    }
}
